<template>
    <div class="main">
        <div v-if="show" class="welcome">
            <van-circle v-model="currentRate"
            :rate="currentRate"  
            :text="time+'s'"
            size="40px"
            @click.native="close" 
            :clockwise="false"/>
            <div class="icon"></div>
        </div>

        <div v-else class="login">
            <div class="logo"></div>
            <div class="input1">
                <van-icon name="phone" />
                <input v-model="phone" type="text" placeholder="请输入手机号">
            </div>
            <div class="input2">
                <van-icon name="comment" />
                <input v-model="code" type="text" placeholder="请输入验证码">
                <span @click="getPhoneCode">| {{text}}</span>
            </div>
            <van-checkbox checked-color="#c8dce8" v-model="remember">记住手机号</van-checkbox>
            <van-checkbox checked-color="#c8dce8" v-model="auto">7天免登录</van-checkbox>
            <van-button :loading="loading" @click="loginEvt" round type="info" color="linear-gradient(to right, #f4d1c7, #ebbfd3)">登录</van-button>
            <van-button @click="$router.push('/reg')" round type="info" color="linear-gradient(to right, #f4d1c7, #ebbfd3)">去注册</van-button>
        </div>
    </div>
</template>
<script>
import {getCode,loginApi,autoLoginApi,getUserInfoApi} from '../../axios/loginApi'
export default {
    data() {
        return {
            show:true,
            currentRate:100,
            time:5,
            timer:null,
            text:'获取验证码',
            remember:false,
            auto:false,
            phone:'',
            code:'',
            loading:false,
            //是否获取验证码
            isGetCode:false,
            //判断验证码是否正确
            message:'',
            //自动登录标志
            autoFlag:'error'
        }
    },

    async created() {
        //倒计时
        this.timer=setInterval(()=>{
            if(this.currentRate>0){
                this.currentRate--
                this.time=Math.ceil(this.currentRate/20)
            }else{
                clearInterval(this.timer)
                this.show=false
                //变量释放
                this.timer=null
                if(this.autoFlag==='success'){
                    this.$router.push('/home')
                }
            }
        },50)
        //判断是否免登录
        let autoText=localStorage.getItem('autoText')
        if(!!autoText){
            let res=await autoLoginApi(autoText)
            if(res.code===200){
                this.$store.commit('common/setToken',autoText)
                this.autoFlag='success'
                // 缓存用户信息
                let user=await getUserInfoApi(res.data.id,autoText)
                user.data.img='https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576'
                this.$store.commit('common/setUserInfo', user.data)
            }
        }
        //判断是否记住密码
        let autoPhone=localStorage.getItem('autoPhone')
        if(autoPhone){
            this.phone=autoPhone
            this.remember=true
        }

    },

    methods: {
        //关闭欢迎界面
        close(){
            if(this.autoFlag==='success'){
                if(this.currentRate<=0){
                    this.$router.push('/home')
                }
            }else{
                clearInterval(this.timer)
                this.timer=null
                this.show=false
            }
        },
        //登录
        async loginEvt(){
            this.loading=true
            if(!/^1[3-9]{1}[0-9]{9}$/.test(this.phone)){
                this.$toast({
                    message: '请输入正确的手机号',
                    position: 'bottom',
                })
                this.loading=false
                return
            }
            //判断是否获取验证码
            if(!this.isGetCode){
                this.$toast({
                    message: '还未获取验证码',
                    position: 'bottom',
                })
                this.loading=false
                return
            }else{
                if(!/^[0-9]{4}$/.test(this.code)||this.code!==this.message){
                    this.$toast({
                    message: '请输入正确的验证码',
                    position: 'bottom',
                    })
                    this.loading=false
                    return
                }
            }
            //请求登录接口
            let res=await loginApi(this.phone,this.code)
            if(res.code===200){
                this.$store.commit('common/setToken',res.data.token)
                this.loading=false
                //调用获取用户信息接口,再将用户信息存储到vuex中
                let user=await getUserInfoApi(res.data.id,res.data.token)
                user.data.img='https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576'
                this.$store.commit('common/setUserInfo',user.data)
                //7天免登录
                if(this.auto){
                    localStorage.setItem('autoText',res.data.token)
                }else{
                    localStorage.removeItem('aotuText')
                }
                //记住手机号
                if(this.remember){
                    localStorage.setItem('autoPhone',this.phone)
                }else{
                    localStorage.removeItem('autoPhone')
                }
            }
            this.$router.push('/home')
        },

        //获取手机验证码
        async getPhoneCode(){
            if(this.text!=='获取验证码'){
                return
            }
            //判断手机号格式
            if(!/^1[3-9]{1}[0-9]{9}$/.test(this.phone)){
                this.$toast({
                    message: '请输入正确的手机号',
                    position: 'bottom',
                })
                return
            }
            this.text='正在获取中'
            let res=await getCode(this.phone)
            if(res.code===200){
                this.$toast.success(`获取验证码成功，验证码：${res.data.code}`)
            }
            //得到获取到的验证码
            this.message=res.data.code
            //得到验证码的表示
            this.isGetCode=true
            this.loopTime(Date.now())
        },
        //通过递归实现重新获取验证码显示
        loopTime(now){
            let time=(Date.now()-now)/1000
            this.text=`重新获取(${Math.ceil(5-time)}s)`
            setTimeout(()=>{
                if(time<5){
                    this.loopTime(now)
                }else{
                    this.text='获取验证码'
                }
            },100)
        }
    },

}
</script>
<style lang="less" scoped>
.main{
    display: block;
    .welcome{
        height: 100%;
        width: 100%;
        position: relative;
        .van-circle{
            display: block;
            position: absolute;
            right: 20px;
            top: 20px;     
        }
        .icon{
            height: 100%;
            width: 100%;
            background:url(../../images/bg.png) no-repeat center center/ 100% 100%;
        }
    }
    .login{
        height: 100%;
        width: 100%;
        background: #fce1da;
        padding-top: 50px;
        .logo{
            margin: 0px auto;
            width: 200px;
            height: 200px;
            background: url(../../images/logo.png)no-repeat center center/ 100% 100%;
        }
        .input1{
            width: 250px;
            margin: 80px auto 20px;
            display: block;
            position: relative;
            background: #fff;
            border: 1px solid #fff;
            border-radius: 20px;
            .van-icon{
                position: absolute;
                top: 9px;
                left: 9px;
                display: block;
                z-index: 90;
            }
            input{     
                border: 0;
                text-indent: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 20px;
                width: 150px;
                &::-webkit-input-placeholder{
                    font-size: 12px;
                }
            }
        }
        .input2{
            width: 250px;
            margin: 20px auto 30px;
            display: block;
            position: relative;
            background: #fff;
            border: 1px solid #fff;
            border-radius: 20px;
            .van-icon{
                position: absolute;
                top: 9px;
                left: 9px;
                display: block;
                z-index: 90;
            }
            input{
                border: 0;
                text-indent: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 20px;
                width: 150px;
                &::-webkit-input-placeholder{
                    font-size: 12px;
                }
            }
            span{
                font-size: 10px;
                &:hover{
                    cursor:pointer;
                }
            }
        }
        .van-checkbox {
            width: 250px;
            margin:0 auto 10px;
        }
        .van-button{
            display: block;
            width: 250px;
            margin:25px auto 10px;
        }
    }
}

</style>